<template>
  <div class="container">
    <div class="title">新建楼栋
      <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
    </div>
    <div class="wrap">
      <el-row>
        <el-col :lg="16" :md="20" :sm="24" :xs="24">
          <el-form :model="building_form" status-icon ref="building_form" label-width="100px" @submit.native.prevent>
            <el-form-item label="楼栋名称" prop="name">
              <el-input size="medium" v-model="building_form.name" placeholder="请填写楼栋名称" ></el-input>
            </el-form-item>
            <el-form-item label="楼栋位置" prop="local">
              <el-input size="medium" v-model="building_form.local" placeholder="请填写楼栋位置"></el-input>
            </el-form-item>
            <el-form-item label="楼栋坐标" prop="coordinates">
              <el-input size="medium" :disabled="true" v-model="building_form.coordinates"
                        placeholder="请在地图上选择楼栋坐标"></el-input>
            </el-form-item>
            <el-form-item label="楼栋管理员" prop="manager">
              <el-input size="medium" v-model="building_form.manager" placeholder="请填写楼栋管理员名字"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input size="medium" v-model="building_form.phone" placeholder="请填入手机号(不能少于11位)"></el-input>
            </el-form-item>
            <el-form-item class="submit">
              <el-button type="primary" @click="submitForm('building_form')" :loading="loading">保 存</el-button>
              <el-button @click="resetForm('building_form')">重 置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <span class="tips">点击</span><span style="font-size: 30px">选择楼栋坐标</span>
      <div id="MapContainer"></div>
    </div>
  </div>
</template>

<script>
import building from '@/model/ag_building'
let map, marker, drawingManager, lngLat,ap;
export default {
  data() {
    return {
      building_form: {
        name:'',
        local: '',
        coordinates: '',
        manager: '',
        phone: '',
      },
      position:[
        {
          longitude: 0,//经度
          latitude:0,//纬度
          city:''
        }
      ],
      loading: false,
    }
  },
  created() {
    this.getMyLocation();
    this.$message({
      type: 'success',
      message: '正在定位！'
    });
  },
  methods: {
    async submitForm(formName) {
      try {
        this.loading = true
        const res = await building.createBuilding(this.building_form)
        this.loading = false
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message.success(`${res.message}`)
          this.resetForm(formName)
          // await this.$router.push("/building/list");
        }
      } catch (error) {
        this.loading = false
        this.$message.error('楼栋添加失败，请检测填写信息')
      }
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //退回
    back() {
      // this.$router.go(-1);
      this.$router.push("/building/list");
    },
    /**
     * /定位获得当前位置信息
     */
    getMyLocation() {
      var geolocation = new qq.maps.Geolocation("Q2WBZ-V2UKK-IOFJZ-AS3FK-KFWPS-JZBUJ", "VueMap");
      geolocation.getLocation(this.showPosition, this.showErr);
    },
    showPosition(position) {
      // console.log(position);
      this.position.latitude = position.lat;
      this.position.longitude = position.lng;
      this.position.city = position.city;
      this.setMapData();
    },
    //定位失败再请求定位，测试使用
    showErr() {
      this.$message({
        type: 'error',
        message: '正在重新定位！'
      });
      this.getMyLocation();
    },
    // 位置信息在地图上展示
    setMapData() {
      //通过坐标直接定位
      //this.position.latitude, this.position.longitude
      this.$message({
        type: 'success',
        message: '定位成功！'
      });
      var myLatlng = new qq.maps.LatLng(24.3558202,102.546434);
      var myOptions = {
        zoom: 20,
        center: myLatlng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP
      }
      //获取dom元素添加地图信息
      map = new qq.maps.Map(document.getElementById("MapContainer"), myOptions)
      //给定位的位置添加图片标注
      marker = new qq.maps.Marker({
        position: myLatlng,
        map: map,
        draggable: true //允许鼠标拖动
      })
      this.mouseClick();
    },
    /**
     * 鼠标点击获取标记位置事件
     */
    mouseClick () {
      const _this = this
      qq.maps.event.addListener(map, 'click', function (event) {
        if(!marker) {
          marker=new qq.maps.Marker({
            position: event.latLng,
            map:map
          })
          return
        }
        marker.setPosition(event.latLng)
        _this.position.latitude = event.latLng.getLat();
        _this.position.longitude = event.latLng.getLng();
        _this.building_form.coordinates=_this.position.latitude.toString().slice(0,10)+','+_this.position.longitude.toString().slice(0,10);
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#MapContainer{
  margin-top: 10px;
  margin-left: 250px;
  width: 1000px;
  height: 500px;
  position: absolute;
}

.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
    border-bottom: 1px solid #dae1ec;
  }

  .wrap {
    padding: 20px;
    .tips{
      color: red;
      padding-left: 550px;
      font-size: 30px;
    }
  }
  .back {
    float: right;
    margin-right: 40px;
    cursor: pointer;
  }

  .submit {
    float: left;
  }
}
</style>
